<script setup>
 import { nextTick, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
 import gridImage from '@/assets/image/grid.jpg'
import { user } from '../../store';

const StaticTalkList=[
    {
        id:1,
        user_id:1,
        user_name:'张三',
        content:'今天天气不错',
        time:'2022-01-01 12:00:00',
        imageList:[gridImage,gridImage,gridImage]
    },
      {
        id:2,
        user_id:1,
        user_name:'M',
        content:'今天天气不错1',
        time:'2022-01-01 12:00:00',
        imageList:[gridImage]
    },
     {
        id:3,
        user_id:1,
        user_name:'M',
        content:'天天开心',
        time:'2022-01-01 12:00:00',
        imageList:[gridImage]
    },
    {
        id:4,
        user_id:1,
        user_name:'M',
        content:'你好4',
        time:'2022-01-01 12:00:00',
        imageList:[gridImage]
    },
    {
        id:5,
        user_id:1,
        user_name:'M',
        content:'你好5',
        time:'2022-01-01 12:00:00',
        imageList:[gridImage]
    },
      {
        id:6,
        user_id:1,
        user_name:'M',
        content:'你好6',
        time:'2022-01-01 12:00:00',
        imageList:[gridImage]
    },
       {
        id:7,
        user_id:1,
        user_name:'M',
        content:'你好7',
        time:'2022-01-01 12:00:00',
        imageList:[gridImage]
    },
     {
        id:8,
        user_id:1,
        user_name:'M',
        content:'你好8',
        time:'2022-01-01 12:00:00',
        imageList:[gridImage]
    },
     {
        id:9,
        user_id:1,
        user_name:'M',
        content:'你好9',
        time:'2022-01-01 12:00:00',
        imageList:[]
    }, {
        id:10,
        user_id:1,
        user_name:'M',
        content:'你好10',
        time:'2022-01-01 12:00:00',
        imageList:[]
    },{
        id:11,
        user_id:1,
        user_name:'M',
        content:'你好11',
        time:'2022-01-01 12:00:00',
        imageList:[]
    },
]
const loadMore=ref(true)
let observeDom=null ,observe=null

const params=reactive({
    currentPage:1,
    pageSize:5
})
const TaklKist =ref([])

const getTalkList=()=>{
  const current = (params.currentPage-1)*params.pageSize
   const talkList = StaticTalkList.slice(current,current+params.pageSize)
  TaklKist.value= params.currentPage ===1 ?talkList : [...TaklKist.value,...talkList]

  if(TaklKist.value.length === StaticTalkList.length){
    loadMore.value=false   
  }
}
const observeTalk=()=>{
    observeDom=document.querySelector(".observer");
    observe=new IntersectionObserver((entries)=>{ 
     entries.forEach(v=>{
        if(v.isIntersecting){
           
          params.currentPage++;
          getTalkList();
        }
     })
    })

    observeDom && observe.observe(observeDom)
}


const initTalkList=()=>{
    getTalkList();
    nextTick(()=>{
      observeTalk()
    })

}

onMounted(()=>{
    initTalkList()
})
onBeforeUnmount(()=>{
    observe && observe.unobserve(observeDom)
    observe=null
})







</script>

<template>  
    <div>
        <el-card>
            <dvi class="p-[40px]">
                <div class="talk-item flex mb-[1rem] border-b pb-[1rem]" v-for="item in TaklKist" :key="item.id">
                    <div class="left">
                        <el-avatar :size="64" shape="square">{{ item.user_name }}</el-avatar>
                    </div>
                    <div class="right ml-[1rem] flex flex-col items-start mb-[1rem]">

                        <div class="nick-name mb-[1.8rrem]">{{ item.user_name }}</div>
                        <div class="talk-content mb-[1rem]">{{item.content}}</div>
                        <div v-if="item.imageList.length>0" >
                        <div v-if="item.imageList.length >1" class="image grid grid-cols-3 gap-1">
                            <div v-for="url in item.imageList" class="w-[100px] h-[100px]]">
                                <el-image :src="url" class="h-[100%] w-[100%] overflow-hidden" fit="cover" ></el-image>
                            </div>
                        </div>
                        <div v-else class="w-[308px] h-[308 px]">
                            
                              <el-image :src="item.imageList[0]" class="h-[100%] w-[100%] overflow-hidden" fit="cover" ></el-image>
                            
                        </div>
                        </div>
                        
                    </div>
                </div>
                <div class="observer text-center">
                        {{ loadMore ? "下拉加载更多" : "已经到底了"}}
                </div>
            </dvi>
        </el-card>
    </div>
</template>